<script setup>
import { onMounted, ref, computed } from 'vue'
import { getTermScoreAPI } from '@/api/score.js'

// 课程数据
const classList = ref([])

// 课程备用数据
const classListBackup = [
{
address: "",
category: "通识教育课/必修课",
color: "#602708",
computeHours: "0.0",
credit: "1.0",
lectureHours: "0.0",
method: "非统考",
name: "思想政治实践课1",
num: "U1300007",
rawSection: "二[9-10节]单",
rawWeeks: "1-18",
section: "9",
sectionCount: 2,
teachMethod: "讲授",
teacher: "猫猫老师",
totalHours: "16.0",
week: 2,
weeks: [1, 3, 5, 7, 9, 11, 13, 15, 17]
},
{
  address: "创新楼403",
category: "通识教育课/必修课",
color: "#FFA400",
computeHours: "0.0",
credit: "2.0",
lectureHours: "16.0",
method: "非统考",
name: "创新设计与创业基础",
num: "U0602406",
rawSection: "三[3-4节]",
rawWeeks: "1-6,8-19",
section: 3,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小熊老师",
totalHours: "32.0",
week: 3,
weeks: [1, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
},
{

address: "博士楼502",
category: "专业课/必修课",
color: "#FF3B56",
computeHours: "0.0",
credit: "3.0",
lectureHours: "54.0",
method: "统考",
name: "财务会计1",
num: "U0403008",
rawSection: "一[1-2节]",
rawWeeks: "1-10,12-17",
section: 1,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小明老师",
totalHours: "54.0",
week: 1,
weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17]
},
{
address: "博士楼502",
category: "专业课/必修课",
color: "#FF3B56",
computeHours: "0.0",
credit: "3.0",
lectureHours: "54.0",
method: "统考",
name: "财务会计1",
rawSection: "四[3-4节]单",
rawWeeks: "1-17,19",
section: 3,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小明老师",
totalHours: "54.0",
week: 4,
weeks: [1, 2, 3, 5, 7, 9, 11, 13, 15, 17, 19],
},
{
  address: "B站BV1go4y1M7Fa",
category: "专业课/必修课",
color: "#FF4900",
computeHours: "0.0",
credit: "2.0",
lectureHours: "34.0",
method: "统考",
name: "小程序开发从入门到放弃",
num: "U0402043",
rawSection: "四[5-8节]",
rawWeeks: "1-18",
section: 5,
sectionCount: 4,
teachMethod: "讲授",
teacher: "蛋白熙",
totalHours: "34.0",
week: 1,
weeks:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
},
{
address: "勤奋楼203",
category: "通识教育课/必修课",
color: "#6B669C",
computeHours: "0.0",
credit: "4.0",
lectureHours: "64.0",
method: "统考",
name: "大学英语A2",
rawSection: "五[1-2节]",
rawWeeks: "2-18",
section: 1,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小美",
totalHours: "64.0",
week: 5,
weeks:[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
},
{
  address: "田径场",
category: "通识教育课/必修课",
color: "#239C24",
computeHours: "0.0",
credit: "1.0",
lectureHours: "16.0",
method: "非统考",
name: "大学体育2",
num: "U0901002",
rawSection: "二[5-6节]",
rawWeeks: "1-18",
section: 5,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小帅",
totalHours: "16.0",
week: 2,
weeks:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
}
,{
  address: "宏远楼410",
category: "通识教育课/必修课",
color: "#EC2077",
computeHours: "0.0",
credit: "3.0",
lectureHours: "48.0",
method: "统考",
name: "高等数学A2",
num: "U0903011",
rawSection: "二[1-2节]",
rawWeeks: "1-6,8-9,11-17,19-20",
section: 1,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小新",
totalHours: "48.0",
week: 2,
weeks:  [1, 2, 3, 4, 5, 6, 8, 9, 11, 12, 13, 14, 15, 16, 17, 19, 20]
},
{
  address: "功德楼602",
category: "通识教育课/必修课",
color: "#EC2077",
computeHours: "0.0",
credit: "3.0",
lectureHours: "48.0",
method: "统考",
name: "高等数学A2",
rawSection: "五[5-6节]",
rawWeeks: "3-5,8-9",
section: 3,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小新",
totalHours: "48.0",
week: 5,
weeks: [3, 4, 5, 8, 9],
},
{
  address: "梅勇楼401",
category: "通识教育课/必修课",
color: "#0AC0FF",
computeHours: "0.0",
credit: "2.0",
lectureHours: "32.0",
method: "非统考",
name: "中国近现代史纲要",
rawSection: "四[11节]单",
rawWeeks: "1-11",
section: 11,
sectionCount: 1,
teachMethod: "讲授",
teacher: "小玲",
totalHours: "32.0",
week: 4,
weeks: [1, 3, 5, 7, 9, 11]
}
]

// 弹框组件对象
const popup = ref(null)

// 打开弹框组件
const openPopup  = () => {
  popup.value.open()
}

// 周数
const week = ref({
  noweek: 1,
  totalWeek: 20
})

// 切换周数
const changeWeek = (index) => {
  week.value.noweek = index + 1
}
// 每周日期
const weekDate = ['一', '二', '三', '四', '五', '六', '日']

// 选定日期
const selectDate = ref(0)

// 切换选定日期
const changeDate = (index) => {
  selectDate.value = index
}

// 当前月份
const nowMonth = ref('')

// 开学日期
const startDate = ref('2023/12/25')

// 动态计算课表日期
const tableDate = computed(() => {
  // 开始时间
  const start = new Date(startDate.value)
  // 当前时间于开始时间之间的差值(毫秒)
  const addTime = (week.value.noweek - 1) * 7 * 24 * 60 * 60 * 1000
  // 计算出当前时间
  const now = start.getTime() + addTime
  // 当前一周的日期
  const arrDay = []
  // 循环添加当前一周的日期
  for(let i = 0; i < weekDate.length; i++) {
    // 将当前日期转换为日期对象
    const date = new Date(now + i * 24 * 60 * 60 * 1000)
    // 格式化日期对象
    const { day } = formatDate(date)
    // 添加到当前日期数组
    arrDay.push(day)
    // 获取日期对应的月份，以本周第一天所在月份为主
    i === 0 &&  (nowMonth.value = formatDate(date).month)
  }
  return arrDay
})

// 时间转换函数
const formatDate = (date = new Date()) => {
  const year = date.getFullYear()
  let month = date.getMonth() + 1
 let day = date.getDate()
  if (month < 10) {
    month = `0${month}`
  }
  if (day < 10) {
    day = `0${day}`
  }
  return {
    year,
    month,
    day: `${month}-${day}`
  }
}

// 获取当前周
const getNowWeek = () => {
  // 当前时间
  const now = new Date().getTime()
  // 开学时间
  const start = new Date(startDate.value).getTime()
// 两者间的时间差
  const diff = now - start
  // 计算出当前是第几周
  const nowweek = Math.ceil(diff / (7 * 24 * 60 * 60 * 1000))
  // console.log(nowweek);
  week.value.noweek = nowweek
}

// 获取当前选定日期
const getNowSelectDate = () => {
  const now = new Date()
  const date = now.getDay()
  // console.log(date);
  selectDate.value = date
}

// 获取学期课表
// const getCourse = async () => {
//   const res = await getTermScoreAPI()
//   console.log(res);
//   classList.value = res.data
//   res.data.forEach((item, index) => {
//     if (!colorMap.value[item.name])  {
//       colorMap.value[item.name] = colorList[index]
//     }
//     item.color = colorMap.value[item.name]
//   }
//   )
// }

// 颜色值
const colorList = [ '#602708','#FFA400', '#FF3B56','#9744DD','#FF4900', '#6B669C','#239C24','#EC2077','#D76200','#0AC0FF']

// 课程颜色映射
const colorMap = ref({})

// 点击更新
const updateData = () => {
  uni.showLoading({
    title: '加载中...',
    success:async() => {
      // await getCourse()
      setTimeout(() => {
      uni.hideLoading()
      uni.showToast({
        title: '刷新成功',
        icon: 'success'
      })
      }, 500)
    }
  })
}

// 查看课程详情
const goDetail = (item) => {
  uni.navigateTo({
    url: '/pages/detail/index?item=' + JSON.stringify(item)
  })
}

onMounted(() => {
  getNowWeek()
  getNowSelectDate()
  // getCourse()
})
</script>

<template>
  <div class="table">
    <view class="header">
     <view class="left" @click="updateData">
      <image
        src="../../static/images/refresh.png"
        mode="widthFix"
      />
     </view>
     <view class="center" @click="openPopup">
      <text>第{{week.noweek}}周</text><text class="iconfont icon-a-jiantou-xia"></text>
     </view>
    </view>
    <view class="content">
      <view class="time">
        <view class="mouth">{{nowMonth}}月</view>
        <div class="week">
          <div class="item " :class="{ active: weekDate[selectDate - 1] === item}" v-for="(item, index) in weekDate" :key="index" @click="changeDate(index)">
            <text >周{{ item }}</text>
            <text class="date">{{ tableDate[index] }}</text>
          </div>
        </div>
      </view>
     <view class="tables">
        <view class="left1">
          <div class="container">
            <div  class="item" v-for="(item, index) in 12" :key="index">
            {{index <= 8 ? "0" + (index + 1) : index + 1}}
            </div>
          </div>
        </view>
        <view class="right1">
          <view class="class-list">
            <view class="item"  v-for="(item, index) in classListBackup" :key="index"  :style="{ height: item.sectionCount * 117 + 'rpx', top: (item.section - 1) * 120 + 'rpx', left: (item.week - 1) * 103 + 'rpx'}">
              <view v-if="item.weeks.includes(week.noweek)"  @click="goDetail(item)" class="item-content" :style="{backgroundColor:item.color}">
                {{ item.name }}@{{ item.address }}
              </view>
            </view>
          </view>
        </view>
       
     </view>
     
    </view>

    <!-- 弹框显示 -->
    <uni-popup class="uni-pop" :safe-area="false"  ref="popup" type="bottom" >
        <view class="popup">
          <view class="title">切换周数</view>
      <view class="container">
        <view class="item" :class="{ active: index + 1 === week.noweek}" v-for="(item,index) in week.totalWeek" :key="index" @click="changeWeek(index)">
          <text class="active" v-if="index+1 === week.noweek">本周</text>
          <text v-else>{{ index <= 8 ? "0" + (index + 1)  : index + 1 }}</text>
        </view>
      </view>
        </view>
    </uni-popup>
  </div>


</template>



<style scoped lang="scss">
.table {

  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F5F7F8;
  // height: 100vh;
  width: 100%;
  .header {
    z-index: 999;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    // height: 176rpx;
    background-color: #fff;
    padding-top: 100rpx;
    display: flex;
    padding-bottom: 20rpx;
    .left {
      width: 70rpx;
      height: 70rpx;
        background: #FFFFFF;  
        margin-left: 45rpx;
        box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20rpx;
      image {
        
        width: 52rpx;
        height: 52rpx;
        opacity: 1;
      }
    }
    .center {
        font-family: 思源黑体;
        font-size: 36rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        margin-left: 218rpx;
        color: #3D3D3D;
      }
  }
  .content {
   padding-top: 180rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F5F6F7;

    .time {
      display: flex;
      padding-top: 16px;
      position: fixed;
      z-index: 100;
      background: #F5F6F7;
      .mouth {
        width: 28px;
        height: 34px;
        opacity: 1;

        font-family: 思源黑体;
        font-size: 24rpx;
        // font-weight: 700;
        line-height: normal;
        letter-spacing: 0em;
        margin-left: 20rpx;
        color: #666666;
        }
        .week {
          flex: 1;
          display: flex;
          justify-content: space-evenly; 
          .item {
            width: 100rpx;
            height: 92rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            &.active {
              border-radius: 16px;
              opacity: 1;

              background: #40D6B0;
              text {
                color: #fff;
              }
              .date {
                color: #fff;
              }
            }
            text {
              font-family: 思源黑体;
              font-size: 24rpx;
              font-weight: normal;
              line-height: normal;
              text-align: center;
              letter-spacing: 0em;

              color: #444444;
            }
            .date {
              font-family: 思源黑体;
              font-size: 20rpx;
              font-weight: normal;
              line-height: normal;
              letter-spacing: 0em;

              color: #A1A1A1;
            }
          }
        }
    }
    .tables {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      margin-top: 120rpx;
      .left1 {
        font-family: 思源黑体;
        font-size: 24rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;

        color: #999999;
        .container {
          margin-left: 5rpx;
          margin-right: 5rpx;
          .item {
            width: 50rpx;
            height: 120rpx;
            opacity: 1;
            background: #F5F6F7;
            text-align: center;
            line-height: 120rpx;
          }
        }
      }
   
      .right1 {
        flex: 1;
        background-color: #fff;
        .class-list {
          display: inline-block;
          width: 100%;
          position: relative;
          .item {
            width: calc((100% - 50rpx) / 7);
            // margin:0 10rpx ;
            position: absolute;
            padding: 10rpx 5rpx;
            // top: 50rpx;
            background-color: #fff;
            .item-content {
              text-align: center;
              width: 90%;
              height: 100%;
              font-family: 思源黑体;
              font-size: 24rpx;
              font-weight: 400;
              text-align: center;
              display: flex;
              align-items: start;
              color: #FFFFFF;
              border-radius: 8rpx;
              padding: 20rpx 0;
            }
          }
        }
      }
    }
  }
  ::v-deep .uni-pop {
    border-radius: 20rpx 20rpx 0 0;
  }
  .popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0 ;
    padding-bottom: 60rpx;
    height: 100%;
    .title {
      font-size: 38rpx;
      font-weight: 700;
      color: #333333;
      margin-top: 60rpx;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      padding: 0 50rpx;
      justify-content: space-around;

      margin-top: 30rpx;
      .item {
        width: 17%;
        background-color: #e7ebec;
        height: 100rpx;
        margin-top: 20rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text {
          font-weight: 600;
          font-size: 28rpx;
          color: #444;
        }
        .active {
          color: #fff;
        }
        &.active {
          background: #49aeec;
        }
      }
    }
  }
}

@font-face {
  font-family: "iconfont"; /* Project id 4285971 */
  src: url('//at.alicdn.com/t/c/font_4285971_48gwfu1hjwh.woff2?t=1706588204876') format('woff2'),
       url('//at.alicdn.com/t/c/font_4285971_48gwfu1hjwh.woff?t=1706588204876') format('woff'),
       url('//at.alicdn.com/t/c/font_4285971_48gwfu1hjwh.ttf?t=1706588204876') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-a-jiantou-xia:before {
  content: "\e613";
}
</style>